<template>
  <div class="containerImg" @click="verify">
<!--    <img src="/src/picture/verify.svg">-->
    <img src="src/picture/verify.svg">
  </div>
    <div v-if="showVerify" class="loading-animation" ref="lottieContainer" >
      <text>认证</text>

      <div class="form-group">
        <label for="verificationCode">验证码</label>
        <input type="text" id="verificationCode" placeholder="请从微信公众号获取验证码">
      </div>

      <button @click="showVerify = false">关闭</button>
    </div>
</template>

<script>
import lottie from 'lottie-web';
import animationData from '/src/json/loading.json'; // 根据实际路径修改

export default {
  data(){
    return{
      showVerify: false,
    }
  },
  mounted() {
    this.initLottie();
  },
  methods: {
    verify() {
      this.showVerify = true;
      console.log("认证")
    },
    initLottie() {
      lottie.loadAnimation({
        container: this.$refs.lottieContainer,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
      });
    }
  }
}
</script>

<style>
.loading-animation {
  width: 100px; /* 调整动画容器的宽度 */
  height: 60px; /* 调整动画容器的高度 */
  border: 2px solid #000000;
}

.alert-verify {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 500px;
  width: 500px;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column; /* 这将使内容垂直排列 */
  align-items: center; /* 这将使内容水平居中 */
}
</style>
